import React, { Component } from 'react';
import Image from 'react-uwp/Image';
import { object } from 'prop-types';

export default class Latest extends Component {
  constructor(props) {
    super(props);
  }
  /**根据type打开新窗口页 */
  latestItem(item, index) {
    return (
      <div
        key={index}
        className="latestItem"
        onClick={() => this.goDetail(item)}
      >
        <div style={{ width: '100%', height: '10.16rem' }}>
          <Image src={item.url} className="imgCover" />
        </div>
        <div className="desc dfr">
          <span
            className="borderHint"
            style={{ marginRight: '0.4rem', marginTop: '0.35rem' }}
          />
          <div>{item.title}</div>
        </div>
        <div className="price">
          <small className="cred">￥</small>
          <span className="f24 cred">{item.price}&nbsp;</span>
          <small style={{ color: '#555', fontSize: '0.4rem' }}>起</small>
        </div>
      </div>
    );
  }

  goDetail(item) {
    const location = {
      pathname: '/attractions/detail',
      search: `?type=attractions&id=${item.id}`
    };
    const { history } = this.context.router;
    const url = history.createHref(location);
    window.open(url);
  }
  render() {
    const { latestList } = this.props;
    return (
      <ul className="dfrcw">
        {latestList
          .slice(0, 6)
          .map((item, index) => this.latestItem(item, index))}
      </ul>
    );
  }
}
Latest.contextTypes = {
  router: object.isRequired
};
